<template>
	<view>
		<uni-card title="悦玺同城" style="min-width: 360px;">
			<template v-slot:title>
				<view class="gl-header"
					style="display: flex;justify-content: space-between;align-items: center;padding: 10px 0;">
					<view style="display: flex;gap: 10px;">
						<uni-icons type="location" size="24"></uni-icons>
						<text style="font-weight: bold;">{{title}}</text>
					</view>
					<view style="display: flex;gap: 10px;">
						<view class="gl-button gl-button-success" hover-class="button-base-hover" :hover-stay-time="100"
							@click="addnew">
							<uni-icons type="folder-add" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">新增</text>
						</view>
						<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
							@click="refresh">
							<uni-icons type="reload" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">刷新</text>
						</view>
					</view>
				</view>
			</template>
			<view class="gl-body">
				<uni-list :border="true" :style="{height:sch+'px'}">
					<uni-list-chat v-for="(item, index) in cityArray" :key="index" :title="item.id+'-'+item.name"
						:clickable="curCityData.id !== item.id"
						:avatar="sConf.cos + (item.icon ?? '/media/default/default.png')" :note="item.desc"
						:time="item.lasttime" @click="changeItem(item)">
						<template v-slot>
							<view v-if:show="curCityData.id === item.id && item.id > 1"
								style="display: flex;gap: 5px;align-items: center;">


								<uni-icons type="compose" size="24" color="#007aff" @click="EventShowEdit"
									style="padding: 4px;border-radius: 4px;background-color: #00000033;"></uni-icons>
								<uni-icons type="trash" size="24" color="#dd524d" @click="EventRemove"
									style="padding: 4px;border-radius: 4px;background-color: #00000033;"></uni-icons>

							</view>
						</template>
					</uni-list-chat>
				</uni-list>
			</view>

			<view class="gl-footer" slot="actions" style="padding-top: 10px;">
				<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
					@change="refresh" />
			</view>

		</uni-card>

		<uni-popup ref="popup" :mask-click="false">
			<uni-card title="悦玺同城" style="min-width: 360px;">
				<template v-slot:title>
					<view style="display: flex;justify-content: space-between;align-items: center;padding: 10px 0;">
						<view style="display: flex;gap: 10px;">
							<uni-icons type="location" size="24"></uni-icons>
							<text style="font-weight: bold;">{{title}}</text>
						</view>
						<view style="display: flex;gap: 10px;">
							<uni-icons type="closeempty" size="18" color="#fff" @click="close"
								style="padding: 4px;border-radius: 4px;background-color: #dd524d;"></uni-icons>
						</view>
					</view>
				</template>
				<view class="">
					<view style="display: flex;gap: 10px;">
						<view class="">
							<image v-if="false" :src="sConf.cos + curCityData.icon" mode="scaleToFill"
								@click="EventUploadCos" style="width: 96px;height: 96px;border-radius: 5px;"></image>
						</view>
						<view style="display: flex;flex-direction: column;gap: 10px;">
							<uni-easyinput v-model="curCityData.name" prefixIcon="font" placeholder="输入名称"
								trim></uni-easyinput>
							<uni-easyinput v-model="curCityData.desc" prefixIcon="link" placeholder="描述"
								trim></uni-easyinput>
						</view>
					</view>
					<view style="display: flex;justify-content: space-around;width: 100%;padding: 10px;">
						<button class="gl-button gl-button-base" size="mini" @click="EventSubmit">提交</button>
						<button class="gl-button gl-button-warning" size="mini" @click="close">取消</button>
					</view>
				</view>
			</uni-card>
		</uni-popup>

		<cos-multiple-post ref="cosPost" :host="sConf.host" :token="sConf.auth.token" path="product" onHide
			@upFinish="EventFinish"></cos-multiple-post>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import psCos from '@/common/psCos';
	export default {
		data() {
			return {
				count: 0, // 记录数
				size: 20, // 页大小
				page: 1, // 当前页
				sch: 0,
				title: '权益模型',
				sConf: getApp().globalData,
				cityArray: [],
				curCityData: {
					id: null,
					icon: '/media/default/default.png',
					desc: null,
					name: null,
					mode: 1
				}
			}
		},
		mounted() {
			this.designLayout()
			this.refresh()
		},
		methods: {
			EventRemove() {
				let that = this
				let tk = this.sConf.auth.token ?? '';
				uni.showModal({
					title: '移除',
					content: `是否要移除 ${this.curCityData.name}`,
					success(r) {
						if (r.confirm) {
							psMethod.syncAuthenticatorRequest(`/admin/modeName/${that.curCityData.id}/`, 'DELETE',
								tk, {}).then(res => {
								that.refresh()
							}).catch(err => {
								console.log('del=>', err);
								uni.showModal({
									title: '失败',
									content: '移除数据失败',
									showCancel: false
								})
							})
						}
					}
				})
			},
			EventSubmit() {
				console.log(this.curCityData);
				if (!this.curCityData.name) {
					uni.showToast({
						title: '检测名称错误'
					})
					return
				}
				let tk = this.sConf.auth.token ?? '';
				let data = this.curCityData
				if (this.curCityData.id) {
					psMethod.syncAuthenticatorRequest(`/admin/modeName/${this.curCityData.id}/`, 'PATCH', tk, data).then(
						res => {
							console.log('修改数据', res);
							this.close()
							this.refresh()
						}).catch(err => {
						uni.showModal({
							title: '错误',
							content: '编辑数据失败',
							showCancel: false
						})
					})
				} else {
					psMethod.syncAuthenticatorRequest('/admin/modeName/', "POST", tk, data).then(res => {
						console.log('创建数据', res);
						this.close()
						this.refresh()
					}).catch(err => {
						console.log('创建失败=>', err);
						uni.showModal({
							title: '错误',
							content: '创建数据失败',
							showCancel: false
						})
					})
				}
			},
			EventFinish(e) {
				console.log('上传图片完成->', e);
				this.curCityData.icon = e[0]
			},
			EventUploadCos() {
				console.log('EventUploadCos');
				this.$refs.cosPost.open()
			},
			close() {
				this.$refs.popup.close()
			},
			addnew() {
				this.curCityData = {
					id: null,
					icon: '/media/default/default.png',
					desc: null,
					name: null,
					mode: 1,
				}
				this.$refs.popup.open()
			},
			EventShowEdit() {
				console.log('EventShowEdit');
				this.$refs.popup.open()
			},
			changeItem(e) {
				this.curCityData = e
				this.$emit('change', e)
			},
			refresh() {
				let tk = this.sConf.auth.token ?? '';
				let data = {
					page: this.page,
					ordering: '-id'
				}
				psMethod.syncAuthenticatorRequest('/admin/modeName/', "GET", tk, data).then(res => {
					console.log('加载数据', res);
					if (this.page > 1) {
						let tmpData = this.cityArray.concat(res.resmsg)
						this.cityArray = tmpData
					} else {
						this.cityArray = res.resmsg
						this.count = res.count
						this.size = res.size
					}
				}).catch(err => {
					if (err.rescode === 404 && this.page > 1) {
						this.page -= 1
					}
				})
			},
			designLayout() {
				this.$nextTick(() => {
					let window = uni.getWindowInfo();
					let wh = window.windowHeight;
					let query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.sch = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 20;
					});
				})
			},

		}
	}
</script>

<style lang="scss" scoped>

</style>